<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>监督反馈</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>
    <link href="__TMPL__/public/assets/wuye/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/wuye/css/app.css" />
    <script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
    <link href="__TMPL__/public/assets/wuye/css/mui.picker.css" rel="stylesheet" />
    <link href="__TMPL__/public/assets/wuye/css/mui.poppicker.css" rel="stylesheet" />
</head>

<body>

<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back"></a>
    <h1 class="mui-title">监督反馈</h1>
</header>
{:widget('Wuye/nav')}
<div class="mui-content">
    <form class="mui-input-group" style="margin-top: 2em;">

        <div class="mui-input-row" style="margin: 10px 5px;height: 8em;">
            <textarea id="textarea" rows="10" placeholder="反馈标题描述"></textarea>
        </div>

        <div class="mui-input-row" style="height: 70px;">
            <label class="btn btn-info">
                <input type="file" accept="image/*" class="mFileInput" style="left:-9999px;position:absolute;" name="image[]" id="image" multiple="multiple">
                <span class="mui-icon" style="font-size: 40px;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tianjiatupian-01-01"></use></svg></span>
            </label>
        </div>
        <div id="preview" class="mui-input-row"></div>
        <div class="mui-button-row">
            <button type="button" class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
            <button type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
        </div>
    </form>
</div>
</body>
<script src="__TMPL__/public/assets/wuye/js/mui.min.js"></script>
<script src="__TMPL__/public/assets/wuye/js/iconfont.js"></script>
<script src="__TMPL__/public/assets/wuye/js/mui.picker.js"></script>
<script src="__TMPL__/public/assets/wuye/js/mui.poppicker.js"></script>
<script>
    var preview = document.querySelector('#preview');
    var oFile = document.querySelector('#image');
    oFile.onchange = function(){
        for(var i=0;i<oFile.files.length;i++){
            var url = window.URL.createObjectURL(oFile.files[i]);
            // 创建预览图片
            var img = new Image();
            img.src = url;
            img.style.width = "80px";
            img.style.height = "80px";
            // 插入预览图片
            preview.appendChild(img);
        }
    }



    var aaa = document.getElementById("rrr"); //获取显示图片的div元素
    var input = document.getElementById("image"); //获取选择图片的input元素

    //这边是判断本浏览器是否支持这个API。
    if(typeof FileReader==='undefined'){
        aaa.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input.setAttribute('disabled','disabled');
    }else{
        input.addEventListener('change',readFile,false); //如果支持就监听改变事件，一旦改变了就运行readFile函数。
    }


    function readFile(){
        var file = this.files[0]; //获取file对象
        //判断file的类型是不是图片类型。
        if(!/image\/\w+/.test(file.type)){
            alert("文件必须为图片！");
            return false;
        }

        var reader = new FileReader(); //声明一个FileReader实例
        reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件
        //最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片
        reader.onload = function(e){
            aaa.innerHTML = '<img src="'+this.result+'" alt="" style="width: 100%"/>'
        }
    }
</script>
</html>